<template>
  <!-- 
    v-model 双向数据绑定
      1. 数据变化了，视图自动更新。
        item.flag 变了 => 复选框会自动同步勾选状态
      2. 视图变化了，数据自动更新。
        复选框的勾选状态改了 => 自动将勾选完的状态更新给了 item.flag

    结论：v-model永远不要和父组件(props)的数据 直接绑定 => 没有遵循单项数据流
  -->
  <!-- 主体部分 -->
  <section class="main">
    <!-- 全选反选按钮 -->
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      @change="changeAll($event)"
    />
    <label for="toggle-all">Mark all as complete</label>

    <ul class="todo-list">
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <li v-for="item in list" :key="item.id" :class="{ completed: item.flag }">
        <div class="view">
          <!-- v-model语法糖, 自动根据不同元素，设置不同的属性，监听不同的事件（vue内部） 
              (1) input type="text" 文本框
                  v-model       => :value  +  @input
                  v-model.lazy  => :value  +  @change
              (2) input text="checkbox" 复选框
                  v-model       => :checked +  @change
          -->
          <input
            class="toggle"
            type="checkbox"
            :checked="item.flag"
            @change="changeFlag($event, item.id)"
          />
          <label>{{ item.value }}</label>
          <button @click="delList(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  // props: ['list']
  props: {
    // list: {
    //   type: Array,
    //   required: true
    // }
    list: {
      type: Array,
      required: true,
    },
  },
  computed: {
    // isAll: {
    //   get () {
    //     // 必须所有的任务都已完成，才选中 every
    //     return this.list.every(item => item.flag === true)
    //   },
    //   set (value) {
    //     this.$emit('changeAll', value)
    //   }
    // }
  },
  methods: {
    //   del (id) {
    //     this.$emit('del', id)
    //   },
    //   handleChange (e, id) {
    //     // console.log(e.target.checked) // e.target 当前的事件源 => 点击的复选框
    //     // 子传父，将需要修改的状态，子传父，传给老父亲
    //     this.$emit('changeState', e.target.checked, id)
    //   }
    changeFlag(e, id) {
      this.$emit('changeFlag', e.target.checked, id)
    },
    delList(id) {
      this.$emit('delList', id)
    },

    changeAll(e) {
      this.$emit('changeAll', e.target.checked)
    },
  },
}
</script>

<style></style>
